<template>
  <div ref="imageWrapper">
    <div class="hearder">
      <div class="item bg-img-left">
        <div class="item-title"><span>数据导入总量</span></div>
        <div class="item-number"><span>{{headerData.all}}</span>条</div>
      </div>
      <div class="item bg-img-mid">
        <div class="item-title"><span>数据上报任务</span></div>
        <div class="item-number"><span>{{headerData.pass}}</span>条</div>
      </div>
      <div class="item bg-img-right">
        <div class="item-title"><span>未完成任务数</span></div>
        <div class="item-number"><span>{{headerData.off}}</span>条</div>
      </div>
    </div>
    <div class="mid-content">
      <a-row :gutter="20">
        <a-col :md="8" :sm="24">
          <a-card :bordered="false">
            <p class="card-title">数据导入任务分类</p>
            <div style="height: 250px; overflow: visible">
              <sjdrrwflEcharts v-if="ImpData.length !== 0" :pieData="ImpData"/>
            </div>
          </a-card>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-card :bordered="false">
            <p class="card-title">数据导入量</p>
            <div style="height: 250px; overflow: visible">
              <sjdrlEcharts v-if="barXName.length !== 0 && barData.length !== 0" :barXName="barXName" :barValue="barData"/>
            </div>
          </a-card>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-card :bordered="false">
            <p class="card-title">数据导入任务量(月)</p>
            <div style="height: 250px; overflow: visible">
              <shdrrwlEcharts v-if="TaskForMonth.length !== 0" :lineData="TaskForMonth"/>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
    <a-card title="填报任务">
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="antableClass"
        @change="handleTableChange">
        <template slot="status" slot-scope="text, record">
          <a-tag v-if="text=='0'" color="orange">
            未填报
          </a-tag>
          <a-tag v-else-if="text=='1'" color="blue">
            已填报
          </a-tag>
          <a-tag v-else-if="text=='2'" color="#2db7f5">
            已上报
          </a-tag>
          <a-tag v-else-if="text=='3'" color="#f50">
            已退回
          </a-tag>
          <a-tag v-else-if="text=='4'" color="green">
            已完成
          </a-tag>
          <a-tag v-else-if="text=='5'" color="red">
            已过期
          </a-tag>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { httpAction, getAction } from '@/api/manage'
import sjdrlEcharts from './ecahrtsComponent/sjdrlEcharts.vue'
import shdrrwlEcharts from './ecahrtsComponent/shdrrwlEcharts.vue'
import sjdrrwflEcharts from './ecahrtsComponent/sjdrrwflEcharts.vue'
import columns from './columns'
import data from './data'
export default {
  components: { sjdrlEcharts, shdrrwlEcharts, sjdrrwflEcharts },
  mixins: [JeecgListMixin],
  data() {
    return {
      columns: columns(),
      loading: false,
      ipagination: {
        current: 1,
        pageSize: 5,
        pageSizeOptions: ['5', '10', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      url: {
        list: '/sjcj/dataCollectionTask/queryAuditlist',
        querydata: '/sjcj/dataCollection/queryData',
        queryImpDataNum:'/sjcj/dataCollection/queryImpDataNum',
        queryTypeOfImp:'/sjcj/dataCollection/queryTypeOfImp',
        queryImpTaskForMonth:'/sjcj/dataCollection/queryImpTaskForMonth'
      },
      // 头部数据
      headerData: {},
      // 饼图数据
      ImpData:[],
      // 柱形图数据
      barXName:[],
      barData:[],
      // 折线数据
      TaskForMonth:[]
    }
  },
  created() {
    // 获取头部数据
    this.getHeaderData();
    // 饼图数据
    this.getImpData();
    // 柱形图数据
    this.getTypeOfImpData();
    // 折线数据
    this.getImpTaskData();
  },
  methods: {
    getHeaderData() {
      this.headerData=[]
      getAction(this.url.querydata).then((res) => {
        if (res.success) {
          this.headerData = res.result
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
      })
    },
    getImpData() {
      this.ImpData =[]
      getAction(this.url.queryImpDataNum).then((res) => {
        if (res.success) {
          this.ImpData = res.result
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
      })
    },
    getTypeOfImpData() {
      this.barXName = [];
      this.barData=[];
      getAction(this.url.queryTypeOfImp).then((res) => {
        if (res.success) {
          let result= res.result
          result.map(item =>{
             this.barXName.push(item.name);
             this.barData.push(item.value);
          })
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
      })
    },
    getImpTaskData() {
      this.TaskForMonth = []
      getAction(this.url.queryImpTaskForMonth).then((res) => {
        if (res.success) {
          let result= res.result
          console.log('网络请求成功');
          result.map(item =>{
            item.type='line',
            item.seriesLayoutBy='row',
            item.emphasis= { focus: 'series' }
          })
          this.TaskForMonth = result
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@assets/less/tableTheme.less';
.hearder {
  background: url('../../../../assets/img/search_bg.png') 100% 100%;
  height: 100px;
  border-radius: 10px;
  box-shadow: 0px 0px 5px #3e3e3e5c;
  margin: 5px 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .item {
    width: 400px;
    height: 70px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-radius: 10px;
    margin: 0px 20px;
    color: white;
    .item-title {
      width: 100px;
    }
    .item-number {
      width: 210px;
      span {
        font-size: 25px;
        font-weight: 700;
        display: inline-block;
        width: 160px;
        text-align: right;
      }
    }
  }
  .bg-img-left {
    background: url('../../../../assets/Statistics-left-bg.png') no-repeat;
    background-position: 0% 0%;
    background-size: 100% 100%;
  }
  .bg-img-mid {
    background: url('../../../../assets/Statistics-mid-bg.png') no-repeat;
    background-position: 0% 0%;
    background-size: 100% 100%;
  }
  .bg-img-right {
    background: url('../../../../assets/Statistics-right-bg.png') no-repeat;
    background-position: 0% 0%;
    background-size: 100% 100%;
  }
}
.mid-content {
  margin: 5px 10px 20px;
  box-sizing: border-box;
  padding: 0px 5px;
  /deep/ .ant-card {
    border-radius: 25px;
    margin: 0px 0px;
    .card-title {
      font-size: 15px;
      color: #2e4c6f;
      font-weight: 550;
      margin: 0px 0px;
    }
  }
}
</style>